<template>
  <div class="box">
    <div>
      <van-nav-bar
        left-text="返回"
        title="订单填写"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 票型规格 -->

    <div class="PicInfoBox">
      <div class="PicInfo">
        <div class="PicTitle">
          <div>{{ BuyTitle }}</div>
          <div>¥{{ BuyPrice }}</div>
        </div>

        <!-- 退换票&购买须知 -->
        <div class="BuyNotice">
          <div>退换票</div>
          <van-cell @click="showPopup">购买须知</van-cell>
          <van-popup
            v-model="showGP"
            closeable
            round
            position="bottom"
            :style="{ height: '50%' }"
          >
            <div class="reserve">
              <h4>购票须知</h4>
              <pre>
    一、相关免票政策
        1、6周岁（含6周岁）以下儿童 
        2、身高1.2米（含1.2米）以下儿童
        3、现役军人、残疾人、浙江省内30年以上
           教龄的教师、离休干部、军残证、浙江
           省无偿献血荣誉证、警官证
    二、相关优惠政策
        1、6周岁（不含6周岁）-18周岁（含18周
           岁）未成年人
        2、1.2米（不含1.2米）-1.5米（含1.5米
           ）的未成年人
        3、中国境内全日制大学本科及以下学历学
           生
        4、60-69周岁老年人
    三、如您不符合以上免票或优惠条件，请勿购买
        半价票和优待票！如已购买，请自行申请退
        票，重新预约购票。
    四、景点地址：杭州市吴山3号 
    五、开放时间：8:00-20:00
    六、入园方式：景区检票口刷二代身份证或二维
        码入园。
        提示：景区实行实名制预约，一人一证一票
        证制，请每位游客随身携带身份证。
    七、退票规则：指定出游日所选时间段有效，
        过时不予入园，未使用可在21日内申请退款
        ，超时作废，不予退款。
    八、如需发票等旅游咨询，请致电客服电话：
        0928-13145210（注意：只开具一个月之内
        的发票，超过时间不予补开）
              </pre>
            </div>
          </van-popup>
        </div>

        <!-- 游玩日期 -->
        <div class="PicDeta">
          <van-cell title="请选择游玩日期" :value="date" @click="show = true" />
          <van-calendar @select="Select" v-model="show" @confirm="onConfirm" />
        </div>
        <!-- 购买数量 -->
        <div class="PicCount">
          <div>购买数量</div>
          <div>
            <van-stepper
              v-model="num"
              theme="round"
              input-width="20px"
              button-size="28px"
              disable-input
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 预约信息 -->
    <div class="touristBox">
      <div class="tourist">
        <div class="title">预约信息</div>
        <div>
          <van-form validate-first>
            <!-- 通过 pattern 进行正则校验 -->
            <van-field
              v-model="uname"
              name="pattern"
              label="姓名"
              placeholder="须与证件上的名字一致"
              :rules="[
                { required: true, message: '姓名不能为空' },
                { pattern: /^[\u4e00-\u9fa5]{2,4}$/, message: '姓名格式错误' },
              ]"
            />
            <van-field
              v-model="idNumber"
              name="asyncValidator"
              label="证件号码"
              placeholder="请填写证件号"
              :rules="[
                { required: true, message: '证件号码不能为空' },
                { pattern: /^\d{18}$/, message: '证件号码格式错误' },
              ]"
            />
            <!-- 通过 validator 进行函数校验 -->
            <van-field
              v-model="phone"
              name="validator"
              label="手机号"
              placeholder="请填写手机号"
              :rules="[
                { required: true, message: '手机号不能为空' },
                { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误' },
              ]"
            />
            <div>
              <div></div>
              <div></div>
            </div>
          </van-form>
        </div>
      </div>
    </div>

    <!-- 服务协议 -->
    <div class="agreementAll">
      <div class="agreement">
        <div>已阅读并同意一些协议</div>
        <div>
          <p>
            点击去支付表示已阅读并同意<span>《用户协议》</span>和<span
              >《隐私政策》</span
            >
          </p>
        </div>
      </div>
    </div>
    <!-- 底部提交订单 -->
    <van-submit-bar
      :price="this.$store.state.BuyPrice * 100 * num"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { addOreder } from "@/request/api";
// import Bus from "../util/bus";
export default {
  data() {
    return {
      showGP: false,
      res: {},
      price: "",
      date: "", //日期组件
      show: false, //日期组件
      detailPic: "", //点击预约传递过来的值
      num: "", //购买数量
      getDate: "", //获取游玩信息
      uname: "", //表单姓名
      phone: "", //表单手机号
      idNumber: "", //表单证件号
      pattern: /\d{6}/,
    };
  },
  computed: {
    ...mapState(["BuyPrice", "BuyTitle"]),
  },
  methods: {
    //购票须知
    showPopup() {
      this.showGP = true;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 日期组件方法
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    Select(date) {
      this.getDate = this.formatDate(date);
    },
    // 点击提交订单回调方法
    onSubmit() {
      const { uname, phone, idNumber, getDate, num } = this;
      const url = "http://xh.tmooc.top:6060/order";
      const params = `oname=${uname}&ophone=${phone}&ocard=${idNumber}&order_time=${getDate}&c_count=${num}&title=${
        this.$store.state.BuyTitle
      }&price=${this.$store.state.BuyPrice}&total=${
        this.$store.state.BuyPrice * num
      }&uname=${this.$store.state.uname}`;
      const name = this.$store.state.uname;
      // console.log("所有参数", params);
      this.axios
        .post(url, params)
        .then((res) => {
          if (name == null) {
            this.$toast("请先登录");
            this.$router.push("/login");
            return;
          }
          if (!getDate) {
            this.$toast("请选择日期");
          } else if (!uname) {
            this.$toast("您输入的姓名格式不正确");
          } else if (!phone) {
            this.$toast("手机号格式不正确");
          } else if (!idNumber) {
            this.$toast("身份证号码格式不正确");
          } else if (res.data.code == 200) {
            this.$router.push("/sciencesDetail/cart/success");
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
  },
  mounted() {
  
  },
  created() {
    // console.log("价格值是");
  },
};
</script>

<style scoped lang="scss" >
.box {
  background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
}
// 票型规格
.PicInfoBox {
  padding: 10px 0;
  .PicInfo {
    margin: 0.6rem;
    background-color: #fff;
    border-radius: 6px;
    .PicTitle {
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-weight: 700;

      div:last-child {
        color: red;
        flex-basis: 30%;
        text-align: center;
      }
    }
    .PicDeta {
      margin: 10px 15px;
    }
    .BuyNotice {
      padding: 5px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .van-cell {
        width: 25%;
        padding: 0;
        .van-cell__value {
          font-size: 16px;
          color: #36d;
        }
      }
      .van-popup {
        background-image: linear-gradient(0deg, rgb(91, 159, 223), white);
        background-size: cover;
        background-repeat: no-repeat;
        .reserve {
          margin: 10px 0px;
          h4 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
            text-align: center;
          }
          pre {
            font-size: 16px;
            line-height: 1.5em;
          }
        }
      }
    }
    .PicCount {
      padding: 15px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .van-cell {
    padding: 0px !important;
  }
}
// 游客信息
.touristBox {
  padding: 0.6rem;
  .tourist {
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 8px;
    .title {
      font-size: 18px;
      font-weight: 700;
      padding-bottom: 10px;
      border-bottom: 1px solid #b3cdf7;
    }
  }
}

// 协议须知
.agreementAll {
  padding: 0.6rem;
  // background-color: #b3cdf7;
  .agreement {
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 8px;
    div:first-child {
      font-size: 18px;
      font-weight: 500;
      line-height: 2rem;
    }
    div:last-child {
      padding: 10px 0;
      p {
        font-size: 14px;
        line-height: 1.4rem;
        span {
          color: #36d;
        }
      }
    }
  }
}
</style>